<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>英雄联盟全新官方网站-腾讯游戏</title>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/index.css">
    <script src="./js/index.js"></script>
</head>

<body>
    <!-- 头部区域 -->
    <div class="header-wrapper">
        <!-- 顶部 -->
        <div class="mask">
            <div class="header w clearfix">
                <!-- logo -->
                <div class="logo fl">
                    <img src="./images/header/logo.png" alt="">
                </div>

                <!-- 导航列表 -->
                <ul id="navList" class="navlist clearfix fl">
                    <li>
                        <a href="#">
                            <span class="nav-title">游戏资料</span>
                            <span class="nav-subtitle">GAME INFO</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <span class="nav-title">商城/合作</span>
                            <span class="nav-subtitle">STORE</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <span class="nav-title">社区互动</span>
                            <span class="nav-subtitle">COMMUNITY</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <span class="nav-title">赛事官网</span>
                            <span class="nav-subtitle">ESPORTS</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <span class="nav-title">自助系统</span>
                            <span class="nav-subtitle">SYSTEM</span>
                        </a>
                    </li>
                </ul>

                <!-- 头部登录 -->
                <div class="login fr">
                    <!-- 登录图标 -->
                    <a href="#" class="person">
                        <img src="./images/header/person.png" alt="">
                        <!-- 雪碧图：框 -->
                        <span></span>
                    </a>
                    <!-- 登录 -->
                    <p class="welcome">
                        亲爱的召唤师，欢迎
                        <a href="#">登录</a>
                    </p>
                    <!-- 登录hover -->
                    <div class="login-hover">
                        <p>
                            登录并且绑定大区后才可以查看您的具体信息哦<br>
                            (包括战绩、资产、声望）
                        </p>
                        <p>官网个人信息显示略有延迟，请以游戏数据为准</p>
                        <a href="#">进入个人中心</a>
                    </div>
                </div>

                <!-- 手机图标 -->
                <div class="phone fr">
                    <!-- 雪碧图：手机 -->
                    <a href="#"></a>
                    <!-- 手机图标hover -->
                    <div class="phone-hover">
                        <img src="./images/header/phone-qrcode.jpg" alt="">
                        <p>扫码下载掌上英雄联盟</p>
                    </div>
                </div>

                <!-- 搜索图标 -->
                <div class="search fr">
                    <!-- 雪碧图：搜索 -->
                    <a href="#"></a>
                </div>
            </div>
        </div>

        <!-- 导航子菜单 -->
        <div class="nav-sub">
            <!-- 子菜单内容 -->
            <div class="w">
                <div class="subbox">
                    <ul class="subbox-list">
                        <li>
                            <a href="#">
                                游戏下载
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                新手指引
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                资料库
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                云顶之弈
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                攻略中心
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                开发者基地
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                海克斯战利品库
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                英雄联盟宇宙
                            </a>
                        </li>
                    </ul>
                    <ul class="subbox-list">
                        <li>
                            <a href="#">
                                点券充值
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                道聚城
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                周边商城
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                LOL桌游
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                LOL信用卡
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                网吧特权
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                电竞小说
                            </a>
                        </li>
                    </ul>
                    <ul class="subbox-list">
                        <li>
                            <a href="#">
                                官方社区
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                视频中心
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                官方论坛
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                官方微信
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                官方微博
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                玩家创作馆
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                作者入驻计划
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                玩家服务
                            </a>
                        </li>
                    </ul>
                    <ul class="subbox-list">
                        <li>
                            <a href="#">
                                LPL职业联赛
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                LPL全明星周末
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                全球总决赛
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                全明星赛
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                德玛西亚杯
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                季中冠军赛
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                洲际系列赛
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                全国高校联赛
                            </a>
                        </li>
                    </ul>
                    <ul class="subbox-list">
                        <li>
                            <a href="#">
                                联系客服
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                转区系统
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                封号查询
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                体验服下载
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                信誉分系统
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                服务器状态查询
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                秩序殿堂
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                峡谷之巅
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

        <!-- 查看详情 -->
        <a href="#">
            <div class="detail">

            </div>
        </a>

        <!-- 游戏版本 -->
        <div class="version">
            <p>当前版本：</p>
            <p>Ver 10.4</p>
            <a href="#">版本详情</a>
        </div>
    </div>

    <!-- 内容区域 -->
    <div class="container-wrapper">
        <div class="container">
            <!-- 第一部分 -->
            <div class="part1 w">
                <!-- 上 -->
                <div class="part1-top clearfix">
                    <!-- 轮播图容器 -->
                    <div class="slideshow-box fl">
                        <!-- 轮播图 -->
                        <ul class="slideshow clearfix">
                            <li>
                                <a href="#">
                                    <img src="./images/slideshow/slideshow1.jpg" alt="">
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="./images/slideshow/slideshow2.jpg" alt="">
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="./images/slideshow/slideshow3.jpg" alt="">
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="./images/slideshow/slideshow4.jpg" alt="">
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="./images/slideshow/slideshow5.jpg" alt="">
                                </a>
                            </li>
                        </ul>
                        <!-- 轮播图导航条 -->
                        <ul class="slideshow-nav clearfix">
                            <li class="nownav">
                                <span>鸡里奥宝典赤月篇</span>
                            </li>
                            <li>
                                <span>腥红之月2020</span>
                            </li>
                            <li>
                                <span>2020情人节</span>
                            </li>
                            <li>
                                <span>至臻塞娜</span>
                            </li>
                            <li>
                                <span>每周限时优惠</span>
                            </li>
                        </ul>
                    </div>

                    <!-- 综合    公告    赛事    攻略    社区 -->
                    <div class="news-box fr">
                        <!-- 标题导航 -->
                        <ul class="news-title">
                            <li class="nowtitle">
                                <a href="#">
                                    综合
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    公告
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    赛事
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    攻略
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    社区
                                </a>
                            </li>
                        </ul>
                        <!-- 新闻列表内容盒 -->
                        <div class="news-content">
                            <h2>
                                <a href="#">2020LPL春季赛3月9日线上恢复开赛</a>
                            </h2>
                            <ul class="content-list">
                                <li>
                                    <span class="list-icon list-icon-blue">娱乐</span>
                                    <a href="#">
                                        "鸡里奥宝典：赤月篇"现已开启!
                                    </a>
                                    <span class="news-date">02-25</span>
                                </li>
                                <li>
                                    <span class="list-icon list-icon-yellow">公告</span>
                                    <a href="#">
                                        10.4云顶之弈版本更新公告：极地羁绊迎来重做
                                    </a>
                                    <span class="news-date">02-24</span>
                                </li>
                                <li>
                                    <span class="list-icon list-icon-yellow">公告</span>
                                    <a href="#">
                                        10.4版本更新公告：腥红之月皮肤到来
                                    </a>
                                    <span class="news-date">02-24</span>
                                </li>
                                <li>
                                    <span class="list-icon list-icon-yellow">公告</span>
                                    <a href="#">
                                        关于国服无限乱斗延长开放时间的公告
                                    </a>
                                    <span class="news-date">02-19</span>
                                </li>
                                <li>
                                    <span class="list-icon list-icon-yellow">其他</span>
                                    <a href="#">
                                        2020年的排位赛与匹配
                                    </a>
                                    <span class="news-date">02-29</span>
                                </li>
                                <li>
                                    <span class="list-icon list-icon-yellow">其他</span>
                                    <a href="#">
                                        云顶之弈：元素崛起中的收获
                                    </a>
                                    <span class="news-date">02-29</span>
                                </li>
                            </ul>
                        </div>
                        <!-- 更多资讯 -->
                        <a href="#" class="morenews">
                            阅读更多<span>最新资讯·→</span>
                        </a>
                    </div>
                </div>

                <!-- 中 -->
                <div class="part1-mid w clearfix">
                    <!-- 热门活动 -->
                    <div class="part-top clearfix">
                        <h2 class="fl">热门活动</h2>
                        <!-- 热门活动标题列表 -->
                        <ul class="part-ul fl">
                            <li class="nowtitle">
                                <a href="#">
                                    正在进行
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    商城特惠
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    长期活动
                                </a>
                            </li>
                            <div class="part-top-more">
                                <a href="#">
                                    更多·→
                                </a>
                            </div>
                        </ul>
                        <!-- 卡片 -->
                        <div class="cardbox">
                            <a href="#" class="card">
                                <img src="./images/going/going1.jpg" alt="">
                                <p>屠龙勇士2020</p>
                                <p>1天后结束</p>
                            </a>
                            <a href="#" class="card">
                                <img src="./images/going/going2.jpg" alt="">
                                <p>2020情人节</p>
                                <p>11天后结束</p>
                            </a>
                            <a href="#" class="card">
                                <img src="./images/going/going3.jpg" alt="">
                                <p>真实伤害 赛娜</p>
                                <p>323天后结束</p>
                            </a>
                            <a href="#" class="card">
                                <img src="./images/going/going4.jpg" alt="">
                                <p>腥红之月2020</p>
                                <p>10天后结束</p>
                            </a>
                        </div>
                    </div>

                    <!-- 下载游戏 -->
                    <div class="gamebox fr">
                        <!-- 上 -->
                        <div class="gamebox-top clearfix">
                            <!-- 下载游戏 -->
                            <a href="#" class="download fl">
                                <img src="./images/part1/download.png" alt="">
                            </a>
                            <!-- 新手必备 -->
                            <a href="#" class="bluebox fr">新手必备</a>
                            <!-- 领取中心 -->
                            <a href="#" class="bluebox fr">领取中心</a>
                        </div>
                        <!-- 下 -->
                        <div class="gamebox-bottom">
                            <ul class="whitebox">
                                <li class="whitenav">
                                    <a href="#">
                                        <i class="iconfont icon-kefu"></i>
                                        <span>在线客服</span>
                                    </a>
                                </li>
                                <li class="whitenav">
                                    <a href="#">
                                        <i class="iconfont icon-tubiaozhizuomoban"></i>
                                        <span>秩序殿堂</span>
                                    </a>
                                </li>
                                <li class="whitenav">
                                    <a href="#">
                                        <i class="iconfont icon-lol"></i>
                                        <span>游戏资料</span>
                                    </a>
                                </li>
                                <li class="whitenav">
                                    <a href="#">
                                        <i class="iconfont icon-lolhuodong"></i>
                                        <span>峡谷之巅</span>
                                    </a>
                                </li>
                            </ul>
                            <ul class="whitebox">
                                <li class="whitenav">
                                    <a href="#">
                                        <i class="iconfont icon-tixing"></i>
                                        <span>云顶之弈</span>
                                    </a>
                                </li>
                                <li class="whitenav">
                                    <a href="#">
                                        <i class="iconfont icon-shuben01"></i>
                                        <span>攻略中心</span>
                                    </a>
                                </li>
                                <li class="whitenav">
                                    <a href="#">
                                        <i class="iconfont icon-yuzhouxingqiu-21"></i>
                                        <span>LOL宇宙</span>
                                    </a>
                                </li>
                                <li class="whitenav">
                                    <a href="#">
                                        <i class="iconfont icon-weixinbangding"></i>
                                        <span>微信绑定</span>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>

                <!-- 下 -->
                <div class="part1-bottom clearfix">
                    <!-- 新英雄&新皮肤 -->
                    <div class="newbox fl">
                        <!-- 新英雄 -->
                        <div class="newcard">
                            <img src="./images/part1/newhero.jpg" alt="">
                            <a href="#" class="newicon">新英雄</a>
                            <p>
                                当大哥的感觉，比不当好太多了。
                            </p>
                            <a href="#" class="heroname">腕豪 瑟提</a>
                            <!-- 卡片遮罩层 -->
                            <div class="cardmask">
                                <i class="border"></i>
                                <p>腕豪 瑟提</p>
                                <a href="#">
                                    查看详情·→
                                </a>
                            </div>
                        </div>
                        <!-- 新皮肤 -->
                        <div class="newcard">
                            <img src="./images/part1/newskin.jpg" alt="">
                            <a href="#" class="newicon">新皮肤</a>
                            <p>
                                全新皮肤、炫彩礼包上架
                            </p>
                            <a href="#" class="heroname">腥红之月2020</a>
                        </div>
                    </div>
                    <!-- 其他 -->
                    <div class="otherbox fr">
                        <!-- 左 -->
                        <div class="otherbox-left">
                            <a href="#">
                                <img src="./images/part1/versions.jpg" alt="">
                            </a>
                            <a href="#">
                                <img src="./images/part1/rim.jpg" alt="">
                            </a>
                        </div>
                        <!-- 右 -->
                        <div class="otherbox-right">
                            <a href="#">
                                <img src="./images/part1/rank.jpg" alt="">
                            </a>
                            <a href="#" class="week-free">
                                周免 ·→
                            </a>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 第二部分 -->
            <div class="part2">
                <div class="w clearfix">
                    <!-- 最新视频 -->
                    <div class="part2-left fl">
                        <div class="part-top clearfix">
                            <h2 class="fl">最新视频</h2>
                            <!-- 最新视频标题列表 -->
                            <ul class="part-ul fl clearfix">
                                <li class="nowtitle">
                                    <a href="#">
                                        推荐
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        官方
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        娱乐
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        赛事
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        云顶之弈
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        教学
                                    </a>
                                </li>
                                <div class="part-top-more">
                                    <a href="#">
                                        更多·→
                                    </a>
                                </div>
                                <div class="part-top-next">
                                    <a href="#">
                                        换一批
                                        <i class="iconfont icon-refresh"></i>
                                    </a>
                                </div>
                            </ul>
                            <!-- 视频区 -->
                            <ul class="video-content">
                                <li class="video-item">
                                    <a href="#">
                                        <img src="./images/part2/vidoe1.jpg" alt="">
                                    </a>
                                    <a href="#" class="video-name">
                                        <p>LOL：剑圣腥红之月 vs 持胡萝卜的雪人 你更喜欢哪个？</p>
                                    </a>
                                    <div class="video-item-bottom">
                                        <span>6.5万次播放</span>
                                        <span>2020-02-25</span>
                                    </div>
                                </li>
                                <li class="video-item">
                                    <a href="#">
                                        <img src="./images/part2/video2.jpg" alt="">
                                    </a>
                                    <a href="#" class="video-name">
                                        <p>主播炸了超神篇：Uzi操作拉满 卡平A秀走位</p>
                                    </a>
                                    <div class="video-item-bottom">
                                        <span>6.2万次播放</span>
                                        <span>2020-02-28</span>
                                    </div>
                                </li>
                                <li class="video-item">
                                    <a href="#">
                                        <img src="./images/part2/video3.jpg" alt="">
                                    </a>
                                    <a href="#" class="video-name">
                                        <p>【回放】2020LPL公开训练赛 VS TES 第二局</p>
                                    </a>
                                    <div class="video-item-bottom">
                                        <span>1.4万次播放</span>
                                        <span>2020-02-27</span>
                                    </div>
                                </li>
                                <li class="video-item">
                                    <a href="#">
                                        <img src="./images/part2/vidoe4.jpg" alt="">
                                    </a>
                                    <a href="#" class="video-name">
                                        <p>主播玩脱了217：张嘉文帅过三秒这波是内蛋葱鸡！</p>
                                    </a>
                                    <div class="video-item-bottom">
                                        <span>5.5万次播放</span>
                                        <span>2020-02-27</span>
                                    </div>
                                </li>
                                <li class="video-item">
                                    <a href="#">
                                        <img src="./images/part2/vidoe5.jpg" alt="">
                                    </a>
                                    <a href="#" class="video-name">
                                        <p>LOL皮肤极致卡点 总有一款你喜欢的皮肤</p>
                                    </a>
                                    <div class="video-item-bottom">
                                        <span>3.5万次播放</span>
                                        <span>2020-02-24</span>
                                    </div>
                                </li>
                                <li class="video-item">
                                    <a href="#">
                                        <img src="./images/part2/vidoe6.jpg" alt="">
                                    </a>
                                    <a href="#" class="video-name">
                                        <p>安妮科学怪人的新娘皮肤效果展示-国服</p>
                                    </a>
                                    <div class="video-item-bottom">
                                        <span>9868次播放</span>
                                        <span>2020-02-27</span>
                                    </div>
                                </li>
                                <li class="video-item">
                                    <a href="#">
                                        <img src="./images/part2/vidoe7.jpg" alt="">
                                    </a>
                                    <a href="#" class="video-name">
                                        <p>乱斗的神！ Theshy吸血鬼豪取四杀，难怪IG打架这么猛</p>
                                    </a>
                                    <div class="video-item-bottom">
                                        <span>1.2万次播放</span>
                                        <span>2020-02-28</span>
                                    </div>
                                </li>
                                <li class="video-item">
                                    <a href="#">
                                        <img src="./images/part2/vidoe8.jpg" alt="">
                                    </a>
                                    <a href="#" class="video-name">
                                        <p>波比和狐理的大招结合在一起是什么情况?塞拉斯又解</p>
                                    </a>
                                    <div class="video-item-bottom">
                                        <span>1.2万次播放</span>
                                        <span>2020-02-24</span>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <!-- 热门专辑 -->
                    <div class="part2-right fr">
                        <div class="part-top clearfix">
                            <h2 class="fl">热门专辑</h2>
                            <!-- 热门专辑标题列表 -->
                            <ul class="part-ul fl clearfix">
                                <li class="nowtitle">
                                    <a href="#">
                                        周一
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        周二
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        周三
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        周四
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        周五
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        周六
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        周日
                                    </a>
                                </li>
                            </ul>
                            <!-- 热门专辑内容区 -->
                            <div class="hotprogram-wrap">
                                <!-- 热门专辑：自动翻页 -->
                                <ul class="hotprogram clearfix">
                                    <li class="hotprogramli fl">
                                        <a href="#" class="hotprogramli-top">
                                            <img src="./images/part2/hotlist1.jpg" alt="">
                                        </a>
                                        <a href="#" class="hotprogramli-mid">
                                            <p class="hotprogramli-name">7连鸡，吃鸡霸主，云顶吃鸡小王子的吃鸡秘诀，斗帝流、盾法流、东北大乱盾创造者</p>
                                        </a>
                                        <a href="#" class="hotprogramli-bottom">
                                            <span class="headimg">
                                                <img src="./images/part2/headimg1.jpg" alt="">
                                            </span>
                                            东北大鹌鹑
                                        </a>
                                    </li>
                                    <li class="hotprogramli fl">
                                        <a href="#" class="hotprogramli-top">
                                            <img src="./images/part2/hotlist2.jpg" alt="">
                                        </a>
                                        <a href="#" class="hotprogramli-mid">
                                            <p class="hotprogramli-name"></p>
                                        </a>
                                        <a href="#" class="hotprogramli-bottom">
                                            <span class="headimg">
                                                <img src="./images/part2/headimg2.jpg" alt="">
                                            </span>
                                            东北大鹌鹑
                                        </a>
                                    </li>
                                    <li class="hotprogramli fl">
                                        <a href="#" class="hotprogramli-top">
                                            <img src="./images/part2/hotlist3.jpg" alt="">
                                        </a>
                                        <a href="#" class="hotprogramli-mid">
                                            <p class="hotprogramli-name">
                                                收罗云顶之弈版本最新内容，为你带来第一手的云顶上分攻略，更多精彩的虎牙主播攻略内容，尽在云顶之巅</p>
                                        </a>
                                        <a href="#" class="hotprogramli-bottom">
                                            <span class="headimg">
                                                <img src="./images/part2/headimg3.jpg" alt="">
                                            </span>
                                            虎牙直播LOL
                                        </a>
                                    </li>
                                </ul>
                                <!-- 左翻页按钮 -->
                                <a href="#" class="left-btn"></a>
                                <!-- 右翻页按钮 -->
                                <a href="#" class="right-btn"></a>
                            </div>
                            <!-- 前往视频中心 -->
                            <a href="#" class="gocenter">前往视频中心 ·→</a>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 第三部分 -->
            <div class="part3 w">
                <!-- 上 -->
                <div class="part3-top">
                    <!-- 标题：赛事中心 -->
                    <div class="part-top w clearfix">
                        <h2 class="fl">赛事中心</h2>
                        <!-- 热门活动标题列表 -->
                        <ul class="part-ul fl">
                            <li class="nowtitle">
                                <a href="#">
                                    春季赛常规赛
                                </a>
                            </li>
                            <div class="part-top-more">
                                <a href="#">
                                    更多·→
                                </a>
                            </div>
                            <a href="#" class="lplli">
                                <img src="./images/part3/lpllogo.png" alt="">
                                2020英雄联盟职业联赛
                            </a>
                        </ul>
                    </div>
                    <!-- 比赛详情 -->
                    <div class="lplgame clearfix">
                        <ul class="lplgamelist">
                            <!-- 1 -->
                            <li class="lplgamecard">
                                <!-- 卡片头部 -->
                                <div class="lplgamecard-top clearfix">
                                    <span class="fl">
                                        已结束
                                    </span>
                                    <span class="fr">17:00</span>
                                    <span class="fr">1-13</span>
                                </div>
                                <!-- 卡片中部 -->
                                <div class="teamlist clearfix">
                                    <!-- 队伍1 -->
                                    <div class="team fl">
                                        <img src="./images/part3/team1.jpg" alt="">
                                        <span>IG</span>
                                    </div>
                                    <!-- 队伍2 -->
                                    <div class="team fr">
                                        <img src="./images/part3/team2.jpg" alt="">
                                        <span>FPX</span>
                                    </div>
                                    <!-- 比分 -->
                                    <span class="gamescore">
                                        <a>2</a>
                                        <a>:</a>
                                        <a>1</a>
                                    </span>
                                    <!-- 视频回顾 -->
                                    <a href="#" class="video-over">
                                        视频回顾
                                    </a>
                                </div>
                                <!-- 底部文字 -->
                                <div class="text-bot">
                                    <p>2020职业联赛</p>
                                    <p>春季赛常规赛 第一周 BO3</p>
                                </div>
                            </li>
                            <!-- 2 -->
                            <li class="lplgamecard">
                                <!-- 卡片头部 -->
                                <div class="lplgamecard-top clearfix">
                                    <span class="fl">
                                        已结束
                                    </span>
                                    <span class="fr">19:00</span>
                                    <span class="fr">1-13</span>
                                </div>
                                <!-- 卡片中部 -->
                                <div class="teamlist clearfix">
                                    <!-- 队伍1 -->
                                    <div class="team fl">
                                        <img src="./images/part3/team3.jpg" alt="">
                                        <span>LGD</span>
                                    </div>
                                    <!-- 队伍2 -->
                                    <div class="team fr">
                                        <img src="./images/part3/team4.jpg" alt="">
                                        <span>LNG</span>
                                    </div>
                                    <!-- 比分 -->
                                    <span class="gamescore">
                                        <a>1</a>
                                        <a>:</a>
                                        <a>2</a>
                                    </span>
                                    <!-- 视频回顾 -->
                                    <a href="#" class="video-over">
                                        视频回顾
                                    </a>
                                </div>
                                <!-- 底部文字 -->
                                <div class="text-bot">
                                    <p>2020职业联赛</p>
                                    <p>春季赛常规赛 第一周 BO3</p>
                                </div>
                            </li>
                            <!-- 3 -->
                            <li class="lplgamecard">
                                <!-- 卡片头部 -->
                                <div class="lplgamecard-top clearfix">
                                    <span class="fl">
                                        已结束
                                    </span>
                                    <span class="fr">17:00</span>
                                    <span class="fr">1-14</span>
                                </div>
                                <!-- 卡片中部 -->
                                <div class="teamlist clearfix">
                                    <!-- 队伍1 -->
                                    <div class="team fl">
                                        <img src="./images/part3/team5.jpg" alt="">
                                        <span>ES</span>
                                    </div>
                                    <!-- 队伍2 -->
                                    <div class="team fr">
                                        <img src="./images/part3/team6.jpg" alt="">
                                        <span>RW</span>
                                    </div>
                                    <!-- 比分 -->
                                    <span class="gamescore">
                                        <a>2</a>
                                        <a>:</a>
                                        <a>0</a>
                                    </span>
                                    <!-- 视频回顾 -->
                                    <a href="#" class="video-over">
                                        视频回顾
                                    </a>
                                </div>
                                <!-- 底部文字 -->
                                <div class="text-bot">
                                    <p>2020职业联赛</p>
                                    <p>春季赛常规赛 第一周 BO3</p>
                                </div>
                            </li>
                            <!-- 4 -->
                            <li class="lplgamecard">
                                <!-- 卡片头部 -->
                                <div class="lplgamecard-top clearfix">
                                    <span class="fl">
                                        已结束
                                    </span>
                                    <span class="fr">19:00</span>
                                    <span class="fr">1-14</span>
                                </div>
                                <!-- 卡片中部 -->
                                <div class="teamlist clearfix">
                                    <!-- 队伍1 -->
                                    <div class="team fl">
                                        <img src="./images/part3/team7.jpg" alt="">
                                        <span>OMG</span>
                                    </div>
                                    <!-- 队伍2 -->
                                    <div class="team fr">
                                        <img src="./images/part3/team8.jpg" alt="">
                                        <span>JDG</span>
                                    </div>
                                    <!-- 比分 -->
                                    <span class="gamescore">
                                        <a>0</a>
                                        <a>:</a>
                                        <a>2</a>
                                    </span>
                                    <!-- 视频回顾 -->
                                    <a href="#" class="video-over">
                                        视频回顾
                                    </a>
                                </div>
                                <!-- 底部文字 -->
                                <div class="text-bot">
                                    <p>2020职业联赛</p>
                                    <p>春季赛常规赛 第一周 BO3</p>
                                </div>
                            </li>
                            <!-- 5 -->
                            <li class="lplgamecard">
                                <!-- 卡片头部 -->
                                <div class="lplgamecard-top clearfix">
                                    <span class="fl">
                                        已结束
                                    </span>
                                    <span class="fr">17:00</span>
                                    <span class="fr">1-15</span>
                                </div>
                                <!-- 卡片中部 -->
                                <div class="teamlist clearfix">
                                    <!-- 队伍1 -->
                                    <div class="team fl">
                                        <img src="./images/part3/team9.jpg" alt="">
                                        <span>VG</span>
                                    </div>
                                    <!-- 队伍2 -->
                                    <div class="team fr">
                                        <img src="./images/part3/team10.jpg" alt="">
                                        <span>BLG</span>
                                    </div>
                                    <!-- 比分 -->
                                    <span class="gamescore">
                                        <a>1</a>
                                        <a>:</a>
                                        <a>2</a>
                                    </span>
                                    <!-- 视频回顾 -->
                                    <a href="#" class="video-over">
                                        视频回顾
                                    </a>
                                </div>
                                <!-- 底部文字 -->
                                <div class="text-bot">
                                    <p>2020职业联赛</p>
                                    <p>春季赛常规赛 第一周 BO3</p>
                                </div>
                            </li>
                        </ul>
                        <a href="#" class="arrowleft"></a>
                        <a href="#" class="arrowright"></a>
                    </div>
                </div>
                <!-- 下 -->
                <div class="part3-bottom clearfix">
                    <!-- 每周最佳阵容 -->
                    <div class="bestteam fl">
                        <h2 class="bestteam-title">每周最佳阵容</h2>
                        <ul class="memberlist">
                            <li>
                                <img src="./images/part3/member1.jpg" alt="">
                            </li>
                            <li>
                                <img src="./images/part3/member2.jpg" alt="">
                            </li>
                            <li>
                                <img src="./images/part3/member3.jpg" alt="">
                            </li>
                            <li>
                                <img src="./images/part3/member4.jpg" alt="">
                            </li>
                            <li>
                                <img src="./images/part3/member5.jpg" alt="">
                            </li>
                        </ul>
                    </div>
                    <!-- 积分榜 -->
                    <div class="score-rank fr">
                        <h2 class="bestteam-title">积分榜</h2>
                        <div class="score-rank-content">
                            <h4 class="score-rank-content-title clearfix">
                                <a class="a-1">排名</a>
                                <a class="a-2">俱乐部</a>
                                <a class="a-3">胜负</a>
                                <a class="a-4">积分</a>
                            </h4>
                            <div class="score-rank-detail">
                                <ul class="score-rank-list">
                                    <!-- 排名1 -->
                                    <li>
                                        <a class="a-1">1</a>
                                        <a class="a-2">
                                            <img src="./images/part3/teamlogo/team1.jpg" alt="">
                                            JDG
                                        </a>
                                        <a class="a-3">2/0</a>
                                        <a class="a-4">2</a>
                                    </li>
                                    <!-- 排名2 -->
                                    <li>
                                        <a class="a-1">2</a>
                                        <a class="a-2">
                                            <img src="./images/part3/teamlogo/team2.jpg" alt="">
                                            ES
                                        </a>
                                        <a class="a-3">2/0</a>
                                        <a class="a-4">2</a>
                                    </li>
                                    <!-- 排名3 -->
                                    <li>
                                        <a class="a-1">3</a>
                                        <a class="a-2">
                                            <img src="./images/part3/teamlogo/team3.jpg" alt="">
                                            IG
                                        </a>
                                        <a class="a-3">2/0</a>
                                        <a class="a-4">2</a>
                                    </li>
                                    <!-- 排名4 -->
                                    <li>
                                        <a class="a-1">4</a>
                                        <a class="a-2">
                                            <img src="./images/part3/teamlogo/team4.jpg" alt="">
                                            TES
                                        </a>
                                        <a class="a-3">2/0</a>
                                        <a class="a-4">2</a>
                                    </li>
                                    <!-- 排名5 -->
                                    <li>
                                        <a class="a-1">5</a>
                                        <a class="a-2">
                                            <img src="./images/part3/teamlogo/team5.jpg" alt="">
                                            BLG
                                        </a>
                                        <a class="a-3">2/0</a>
                                        <a class="a-4">2</a>
                                    </li>
                                    <!-- 排名6 -->
                                    <li>
                                        <a class="a-1">6</a>
                                        <a class="a-2">
                                            <img src="./images/part3/teamlogo/team6.jpg" alt="">
                                            EDG
                                        </a>
                                        <a class="a-3">1/1</a>
                                        <a class="a-4">1</a>
                                    </li>
                                    <!-- 排名7 -->
                                    <li>
                                        <a class="a-1">7</a>
                                        <a class="a-2">
                                            <img src="./images/part3/teamlogo/team7.jpg" alt="">
                                            RW
                                        </a>
                                        <a class="a-3">1/1</a>
                                        <a class="a-4">1</a>
                                    </li>
                                    <!-- 排名8 -->
                                    <li>
                                        <a class="a-1">8</a>
                                        <a class="a-2">
                                            <img src="./images/part3/teamlogo/team8.jpg" alt="">
                                            VG
                                        </a>
                                        <a class="a-3">1/1</a>
                                        <a class="a-4">1</a>
                                    </li>
                                    <!-- 排名9 -->
                                    <li>
                                        <a class="a-1">9</a>
                                        <a class="a-2">
                                            <img src="./images/part3/teamlogo/team9.jpg" alt="">
                                            LNG
                                        </a>
                                        <a class="a-3">1/1</a>
                                        <a class="a-4">1</a>
                                    </li>
                                    <!-- 排名10 -->
                                    <li>
                                        <a class="a-1">10</a>
                                        <a class="a-2">
                                            <img src="./images/part3/teamlogo/team10.jpg" alt="">
                                            LGD
                                        </a>
                                        <a class="a-3">0/1</a>
                                        <a class="a-4">0</a>
                                    </li>
                                    <!-- 排名11 -->
                                    <li>
                                        <a class="a-1">11</a>
                                        <a class="a-2">
                                            <img src="./images/part3/teamlogo/team11.jpg" alt="">
                                            RNG
                                        </a>
                                        <a class="a-3">0/1</a>
                                        <a class="a-4">0</a>
                                    </li>
                                    <!-- 排名12 -->
                                    <li>
                                        <a class="a-1">12</a>
                                        <a class="a-2">
                                            <img src="./images/part3/teamlogo/team12.jpg" alt="">
                                            WE
                                        </a>
                                        <a class="a-3">0/1</a>
                                        <a class="a-4">0</a>
                                    </li>
                                    <!-- 排名13 -->
                                    <li>
                                        <a class="a-1">13</a>
                                        <a class="a-2">
                                            <img src="./images/part3/teamlogo/team13.jpg" alt="">
                                            OMG
                                        </a>
                                        <a class="a-3">0/1</a>
                                        <a class="a-4">0</a>
                                    </li>
                                    <!-- 排名14 -->
                                    <li>
                                        <a class="a-1">14</a>
                                        <a class="a-2">
                                            <img src="./images/part3/teamlogo/team14.jpg" alt="">
                                            SN
                                        </a>
                                        <a class="a-3">0/1</a>
                                        <a class="a-4">0</a>
                                    </li>
                                    <!-- 排名15 -->
                                    <li>
                                        <a class="a-1">15</a>
                                        <a class="a-2">
                                            <img src="./images/part3/teamlogo/team15.jpg" alt="">
                                            V5
                                        </a>
                                        <a class="a-3">0/1</a>
                                        <a class="a-4">0</a>
                                    </li>
                                    <!-- 排名16 -->
                                    <li>
                                        <a class="a-1">16</a>
                                        <a class="a-2">
                                            <img src="./images/part3/teamlogo/team16.jpg" alt="">
                                            FPX
                                        </a>
                                        <a class="a-3">0/2</a>
                                        <a class="a-4">0</a>
                                    </li>
                                    <!-- 排名17 -->
                                    <li>
                                        <a class="a-1">17</a>
                                        <a class="a-2">
                                            <img src="./images/part3/teamlogo/team17.jpg" alt="">
                                            DMO
                                        </a>
                                        <a class="a-3">0/2</a>
                                        <a class="a-4">0</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 第四部分 -->
            <div class="part4">
                <div class="w clearfix">
                    <!-- 英雄资料栏 -->
                    <div class="part-top w clearfix fl">
                        <h2 class="fl">英雄资料</h2>
                        <ul class="herolist fl">
                            <li class="herolist-on">
                                <a href="#">所有英雄</a>
                            </li>
                            <li>
                                <a href="#">战士</a>
                            </li>
                            <li>
                                <a href="#">法师</a>
                            </li>
                            <li>
                                <a href="#">刺客</a>
                            </li>
                            <li>
                                <a href="#">坦克</a>
                            </li>
                            <li>
                                <a href="#">射手</a>
                            </li>
                            <li>
                                <a href="#">辅助</a>
                            </li>
                        </ul>
                        <div class="part-top-more">
                            <a href="#">
                                资料库·→
                            </a>
                        </div>
                    </div>
                    <!-- 英雄头像 -->
                    <div class="hero-wrap fl">
                        <ul class="herocard">
                            <li>
                                <a href="#"><img src="./images/part4/heroimage/Annie.png" />
                                    <p>黑暗之女</p>
                                </a>
                            </li>
                            <li>
                                <a href="#"><img src="./images/part4/heroimage/Olaf.png" />
                                    <p>狂战士</p>
                                </a>
                            </li>
                            <li>
                                <a href="#"><img src="./images/part4/heroimage/Galio.png" />
                                    <p>正义巨像</p>
                                </a>
                            </li>
                            <li>
                                <a href="#"><img src="./images/part4/heroimage/TwistedFate.png" />
                                    <p>卡牌大师</p>
                                </a>
                            </li>
                            <li>
                                <a href="#"><img src="./images/part4/heroimage/XinZhao.png" />
                                    <p>德邦总管</p>
                                </a>
                            </li>
                            <li>
                                <a href="#"><img src="./images/part4/heroimage/Urgot.png" />
                                    <p>无畏战车</p>
                                </a>
                            </li>
                            <li>
                                <a href="#"><img src="./images/part4/heroimage/Leblanc.png" />
                                    <p>诡术妖姬</p>
                                </a>
                            </li>
                            <li>
                                <a href="#"><img src="./images/part4/heroimage/Vladimir.png" />
                                    <p>猩红收割者</p>
                                </a>
                            </li>
                            <li>
                                <a href="#"><img src="./images/part4/heroimage/FiddleSticks.png" />
                                    <p>末日使者</p>
                                </a>
                            </li>
                            <li>
                                <a href="#"><img src="./images/part4/heroimage/Kayle.png" />
                                    <p>正义天使</p>
                                </a>
                            </li>
                            <li>
                                <a href="#"><img src="./images/part4/heroimage/MasterYi.png" />
                                    <p>无极剑圣</p>
                                </a>
                            </li>
                            <li>
                                <a href="#"><img src="./images/part4/heroimage/Alistar.png" />
                                    <p>牛头酋长</p>
                                </a>
                            </li>
                            <li>
                                <a href="#"><img src="./images/part4/heroimage/Ryze.png" />
                                    <p>符文法师</p>
                                </a>
                            </li>
                            <li>
                                <a href="#"><img src="./images/part4/heroimage/Sion.png" />
                                    <p>亡灵战神</p>
                                </a>
                            </li>
                            <li>
                                <a href="#"><img src="./images/part4/heroimage/Sivir.png" />
                                    <p>战争女神</p>
                                </a>
                            </li>
                            <li>
                                <a href="#"><img src="./images/part4/heroimage/Soraka.png" />
                                    <p>众星之子</p>
                                </a>
                            </li>
                            <li>
                                <a href="#"><img src="./images/part4/heroimage/Teemo.png" />
                                    <p>迅捷斥候</p>
                                </a>
                            </li>
                            <li>
                                <a href="#"><img src="./images/part4/heroimage/Tristana.png" />
                                    <p>麦林炮手</p>
                                </a>
                            </li>
                            <li>
                                <a href="#"><img src="./images/part4/heroimage/Warwick.png" />
                                    <p>祖安怒兽</p>
                                </a>
                            </li>
                            <li>
                                <a href="#"><img src="./images/part4/heroimage/Nunu.png" />
                                    <p>雪原双子</p>
                                </a>
                            </li>
                            <li>
                                <a href="#"><img src="./images/part4/heroimage/MissFortune.png" />
                                    <p>赏金猎人</p>
                                </a>
                            </li>
                            <li>
                                <a href="#"><img src="./images/part4/heroimage/Ashe.png" />
                                    <p>寒冰射手</p>
                                </a>
                            </li>
                            <li>
                                <a href="#"><img src="./images/part4/heroimage/Tryndamere.png" />
                                    <p>蛮族之王</p>
                                </a>
                            </li>
                            <li>
                                <a href="#"><img src="./images/part4/heroimage/Jax.png" />
                                    <p>武器大师</p>
                                </a>
                            </li>
                            <li>
                                <a href="#"><img src="./images/part4/heroimage/Morgana.png" />
                                    <p>堕落天使</p>
                                </a>
                            </li>
                            <li>
                                <a href="#"><img src="./images/part4/heroimage/Zilean.png" />
                                    <p>时光守护者</p>
                                </a>
                            </li>
                            <li>
                                <a href="#"><img src="./images/part4/heroimage/Singed.png" />
                                    <p>炼金术士</p>
                                </a>
                            </li>
                            <li>
                                <a href="#"><img src="./images/part4/heroimage/Evelynn.png" />
                                    <p>痛苦之拥</p>
                                </a>
                            </li>
                            <li>
                                <a href="#"><img src="./images/part4/heroimage/Twitch.png" />
                                    <p>瘟疫之源</p>
                                </a>
                            </li>
                            <li>
                                <a href="#"><img src="./images/part4/heroimage/Karthus.png" />
                                    <p>死亡颂唱者</p>
                                </a>
                            </li>
                            <li>
                                <a href="#"><img src="./images/part4/heroimage/Chogath.png" />
                                    <p>虚空恐惧</p>
                                </a>
                            </li>
                            <li>
                                <a href="#"><img src="./images/part4/heroimage/Amumu.png" />
                                    <p>殇之木乃伊</p>
                                </a>
                            </li>
                            <li>
                                <a href="#"><img src="./images/part4/heroimage/Rammus.png" />
                                    <p>披甲龙龟</p>
                                </a>
                            </li>
                            <li>
                                <a href="#"><img src="./images/part4/heroimage/Anivia.png" />
                                    <p>冰晶凤凰</p>
                                </a>
                            </li>
                            <li>
                                <a href="#"><img src="./images/part4/heroimage/Shaco.png" />
                                    <p>恶魔小丑</p>
                                </a>
                            </li>
                            <li>
                                <a href="#"><img src="./images/part4/heroimage/DrMundo.png" />
                                    <p>祖安狂人</p>
                                </a>
                            </li>
                            <li>
                                <a href="#"><img src="./images/part4/heroimage/Sona.png" />
                                    <p>琴瑟仙女</p>
                                </a>
                            </li>
                            <li>
                                <a href="#"><img src="./images/part4/heroimage/Kassadin.png" />
                                    <p>虚空行者</p>
                                </a>
                            </li>
                            <li>
                                <a href="#"><img src="./images/part4/heroimage/Irelia.png" />
                                    <p>刀锋舞者</p>
                                </a>
                            </li>
                            <li>
                                <a href="#"><img src="./images/part4/heroimage/Janna.png" />
                                    <p>风暴之怒</p>
                                </a>
                            </li>
                            <li>
                                <a href="#"><img src="./images/part4/heroimage/Gangplank.png" />
                                    <p>海洋之灾</p>
                                </a>
                            </li>
                            <li>
                                <a href="#"><img src="./images/part4/heroimage/Corki.png" />
                                    <p>英勇投弹手</p>
                                </a>
                            </li>
                            <li>
                                <a href="#"><img src="./images/part4/heroimage/Karma.png" />
                                    <p>天启者</p>
                                </a>
                            </li>
                            <li>
                                <a href="#"><img src="./images/part4/heroimage/Taric.png" />
                                    <p>瓦洛兰之盾</p>
                                </a>
                            </li>
                            <li>
                                <a href="#"><img src="./images/part4/heroimage/Veigar.png" />
                                    <p>邪恶小法师</p>
                                </a>
                            </li>
                            <li>
                                <a href="#"><img src="./images/part4/heroimage/Trundle.png" />
                                    <p>巨魔之王</p>
                                </a>
                            </li>
                            <li>
                                <a href="#"><img src="./images/part4/heroimage/Swain.png" />
                                    <p>诺克萨斯统领</p>
                                </a>
                            </li>
                            <li>
                                <a href="#"><img src="./images/part4/heroimage/Caitlyn.png" />
                                    <p>皮城女警</p>
                                </a>
                            </li>
                            <li>
                                <a href="#"><img src="./images/part4/heroimage/Blitzcrank.png" />
                                    <p>蒸汽机器人</p>
                                </a>
                            </li>
                            <li>
                                <a href="#"><img src="./images/part4/heroimage/Malphite.png" />
                                    <p>熔岩巨兽</p>
                                </a>
                            </li>
                            <li>
                                <a href="#"><img src="./images/part4/heroimage/Katarina.png" />
                                    <p>不祥之刃</p>
                                </a>
                            </li>
                            <li>
                                <a href="#"><img src="./images/part4/heroimage/Nocturne.png" />
                                    <p>永恒梦魇</p>
                                </a>
                            </li>
                            <li>
                                <a href="#"><img src="./images/part4/heroimage/Maokai.png" />
                                    <p>扭曲树精</p>
                                </a>
                            </li>
                            <li>
                                <a href="#"><img src="./images/part4/heroimage/Renekton.png" />
                                    <p>荒漠屠夫</p>
                                </a>
                            </li>
                            <li>
                                <a href="#"><img src="./images/part4/heroimage/JarvanIV.png" />
                                    <p>德玛西亚皇子</p>
                                </a>
                            </li>
                            <li>
                                <a href="#"><img src="./images/part4/heroimage/Elise.png" />
                                    <p>蜘蛛女皇</p>
                                </a>
                            </li>
                            <li>
                                <a href="#"><img src="./images/part4/heroimage/Orianna.png" />
                                    <p>发条魔灵</p>
                                </a>
                            </li>
                            <li>
                                <a href="#"><img src="./images/part4/heroimage/MonkeyKing.png" />
                                    <p>齐天大圣</p>
                                </a>
                            </li>
                            <li>
                                <a href="#"><img src="./images/part4/heroimage/Brand.png" />
                                    <p>复仇焰魂</p>
                                </a>
                            </li>
                            <li>
                                <a href="#"><img src="./images/part4/heroimage/LeeSin.png" />
                                    <p>盲僧</p>
                                </a>
                            </li>
                            <li>
                                <a href="#"><img src="./images/part4/heroimage/Vayne.png" />
                                    <p>暗夜猎手</p>
                                </a>
                            </li>
                            <li>
                                <a href="#"><img src="./images/part4/heroimage/Rumble.png" />
                                    <p>机械公敌</p>
                                </a>
                            </li>
                            <li>
                                <a href="#"><img src="./images/part4/heroimage/Cassiopeia.png" />
                                    <p>魔蛇之拥</p>
                                </a>
                            </li>
                            <li>
                                <a href="#"><img src="./images/part4/heroimage/Skarner.png" />
                                    <p>水晶先锋</p>
                                </a>
                            </li>
                            <li>
                                <a href="#"><img src="./images/part4/heroimage/Heimerdinger.png" />
                                    <p>大发明家</p>
                                </a>
                            </li>
                            <li>
                                <a href="#"><img src="./images/part4/heroimage/Nasus.png" />
                                    <p>沙漠死神</p>
                                </a>
                            </li>
                            <li>
                                <a href="#"><img src="./images/part4/heroimage/Nidalee.png" />
                                    <p>狂野女猎手</p>
                                </a>
                            </li>
                            <li>
                                <a href="#"><img src="./images/part4/heroimage/Udyr.png" />
                                    <p>兽灵行者</p>
                                </a>
                            </li>
                            <li>
                                <a href="#"><img src="./images/part4/heroimage/Poppy.png" />
                                    <p>圣锤之毅</p>
                                </a>
                            </li>
                            <li>
                                <a href="#"><img src="./images/part4/heroimage/Gragas.png" />
                                    <p>酒桶</p>
                                </a>
                            </li>
                            <li>
                                <a href="#"><img src="./images/part4/heroimage/Pantheon.png" />
                                    <p>不屈之枪</p>
                                </a>
                            </li>
                            <li>
                                <a href="#"><img src="./images/part4/heroimage/Ezreal.png" />
                                    <p>探险家</p>
                                </a>
                            </li>
                            <li>
                                <a href="#"><img src="./images/part4/heroimage/Mordekaiser.png" />
                                    <p>铁铠冥魂</p>
                                </a>
                            </li>
                            <li>
                                <a href="#"><img src="./images/part4/heroimage/Yorick.png" />
                                    <p>牧魂人</p>
                                </a>
                            </li>
                            <li>
                                <a href="#"><img src="./images/part4/heroimage/Akali.png" />
                                    <p>离群之刺</p>
                                </a>
                            </li>
                            <li>
                                <a href="#"><img src="./images/part4/heroimage/Kennen.png" />
                                    <p>狂暴之心</p>
                                </a>
                            </li>
                            <li>
                                <a href="#"><img src="./images/part4/heroimage/Garen.png" />
                                    <p>德玛西亚之力</p>
                                </a>
                            </li>
                            <li>
                                <a href="#"><img src="./images/part4/heroimage/Leona.png" />
                                    <p>曙光女神</p>
                                </a>
                            </li>
                            <li>
                                <a href="#"><img src="./images/part4/heroimage/Malzahar.png" />
                                    <p>虚空先知</p>
                                </a>
                            </li>
                            <li>
                                <a href="#"><img src="./images/part4/heroimage/Talon.png" />
                                    <p>刀锋之影</p>
                                </a>
                            </li>
                            <li>
                                <a href="#"><img src="./images/part4/heroimage/Riven.png" />
                                    <p>放逐之刃</p>
                                </a>
                            </li>
                            <li>
                                <a href="#"><img src="./images/part4/heroimage/KogMaw.png" />
                                    <p>深渊巨口</p>
                                </a>
                            </li>
                            <li>
                                <a href="#"><img src="./images/part4/heroimage/Shen.png" />
                                    <p>暮光之眼</p>
                                </a>
                            </li>
                            <li>
                                <a href="#"><img src="./images/part4/heroimage/Lux.png" />
                                    <p>光辉女郎</p>
                                </a>
                            </li>
                            <li>
                                <a href="#"><img src="./images/part4/heroimage/Xerath.png" />
                                    <p>远古巫灵</p>
                                </a>
                            </li>
                            <li>
                                <a href="#"><img src="./images/part4/heroimage/Shyvana.png" />
                                    <p>龙血武姬</p>
                                </a>
                            </li>
                            <li>
                                <a href="#"><img src="./images/part4/heroimage/Ahri.png" />
                                    <p>九尾妖狐</p>
                                </a>
                            </li>
                            <li>
                                <a href="#"><img src="./images/part4/heroimage/Graves.png" />
                                    <p>法外狂徒</p>
                                </a>
                            </li>
                            <li>
                                <a href="#"><img src="./images/part4/heroimage/Fizz.png" />
                                    <p>潮汐海灵</p>
                                </a>
                            </li>
                            <li>
                                <a href="#"><img src="./images/part4/heroimage/Volibear.png" />
                                    <p>雷霆咆哮</p>
                                </a>
                            </li>
                            <li>
                                <a href="#"><img src="./images/part4/heroimage/Rengar.png" />
                                    <p>傲之追猎者</p>
                                </a>
                            </li>
                            <li>
                                <a href="#"><img src="./images/part4/heroimage/Varus.png" />
                                    <p>惩戒之箭</p>
                                </a>
                            </li>
                            <li>
                                <a href="#"><img src="./images/part4/heroimage/Nautilus.png" />
                                    <p>深海泰坦</p>
                                </a>
                            </li>
                            <li>
                                <a href="#"><img src="./images/part4/heroimage/Viktor.png" />
                                    <p>机械先驱</p>
                                </a>
                            </li>
                            <li>
                                <a href="#"><img src="./images/part4/heroimage/Sejuani.png" />
                                    <p>北地之怒</p>
                                </a>
                            </li>
                            <li>
                                <a href="#"><img src="./images/part4/heroimage/Fiora.png" />
                                    <p>无双剑姬</p>
                                </a>
                            </li>
                            <li>
                                <a href="#"><img src="./images/part4/heroimage/Ziggs.png" />
                                    <p>爆破鬼才</p>
                                </a>
                            </li>
                            <li>
                                <a href="#"><img src="./images/part4/heroimage/Lulu.png" />
                                    <p>仙灵女巫</p>
                                </a>
                            </li>
                            <li>
                                <a href="#"><img src="./images/part4/heroimage/Draven.png" />
                                    <p>荣耀行刑官</p>
                                </a>
                            </li>
                            <li>
                                <a href="#"><img src="./images/part4/heroimage/Hecarim.png" />
                                    <p>战争之影</p>
                                </a>
                            </li>
                            <li>
                                <a href="#"><img src="./images/part4/heroimage/Khazix.png" />
                                    <p>虚空掠夺者</p>
                                </a>
                            </li>
                            <li>
                                <a href="#"><img src="./images/part4/heroimage/Darius.png" />
                                    <p>诺克萨斯之手</p>
                                </a>
                            </li>
                            <li>
                                <a href="#"><img src="./images/part4/heroimage/Jayce.png" />
                                    <p>未来守护者</p>
                                </a>
                            </li>
                            <li>
                                <a href="#"><img src="./images/part4/heroimage/Lissandra.png" />
                                    <p>冰霜女巫</p>
                                </a>
                            </li>
                            <li>
                                <a href="#"><img src="./images/part4/heroimage/Diana.png" />
                                    <p>皎月女神</p>
                                </a>
                            </li>
                            <li>
                                <a href="#"><img src="./images/part4/heroimage/Quinn.png" />
                                    <p>德玛西亚之翼</p>
                                </a>
                            </li>
                            <li>
                                <a href="#"><img src="./images/part4/heroimage/Syndra.png" />
                                    <p>暗黑元首</p>
                                </a>
                            </li>
                            <li>
                                <a href="#"><img src="./images/part4/heroimage/AurelionSol.png" />
                                    <p>铸星龙王</p>
                                </a>
                            </li>
                            <li>
                                <a href="#"><img src="./images/part4/heroimage/Kayn.png" />
                                    <p>影流之镰</p>
                                </a>
                            </li>
                            <li>
                                <a href="#"><img src="./images/part4/heroimage/Zoe.png" />
                                    <p>暮光星灵</p>
                                </a>
                            </li>
                            <li>
                                <a href="#"><img src="./images/part4/heroimage/Zyra.png" />
                                    <p>荆棘之兴</p>
                                </a>
                            </li>
                            <li>
                                <a href="#"><img src="./images/part4/heroimage/Kaisa.png" />
                                    <p>虚空之女</p>
                                </a>
                            </li>
                            <li>
                                <a href="#"><img src="./images/part4/heroimage/Gnar.png" />
                                    <p>迷失之牙</p>
                                </a>
                            </li>
                            <li>
                                <a href="#"><img src="./images/part4/heroimage/Zac.png" />
                                    <p>生化魔人</p>
                                </a>
                            </li>
                            <li>
                                <a href="#"><img src="./images/part4/heroimage/Yasuo.png" />
                                    <p>疾风剑豪</p>
                                </a>
                            </li>
                            <li>
                                <a href="#"><img src="./images/part4/heroimage/Velkoz.png" />
                                    <p>虚空之眼</p>
                                </a>
                            </li>
                            <li>
                                <a href="#"><img src="./images/part4/heroimage/Taliyah.png" />
                                    <p>岩雀</p>
                                </a>
                            </li>
                            <li>
                                <a href="#"><img src="./images/part4/heroimage/Camille.png" />
                                    <p>青钢影</p>
                                </a>
                            </li>
                            <li>
                                <a href="#"><img src="./images/part4/heroimage/Braum.png" />
                                    <p>弗雷尔卓德之心</p>
                                </a>
                            </li>
                            <li>
                                <a href="#"><img src="./images/part4/heroimage/Jhin.png" />
                                    <p>戏命师</p>
                                </a>
                            </li>
                            <li>
                                <a href="#"><img src="./images/part4/heroimage/Kindred.png" />
                                    <p>永猎双子</p>
                                </a>
                            </li>
                            <li>
                                <a href="#"><img src="./images/part4/heroimage/Jinx.png" />
                                    <p>暴走萝莉</p>
                                </a>
                            </li>
                            <li>
                                <a href="#"><img src="./images/part4/heroimage/TahmKench.png" />
                                    <p>河流之王</p>
                                </a>
                            </li>
                            <li>
                                <a href="#"><img src="./images/part4/heroimage/Senna.png" />
                                    <p>涤魂圣枪</p>
                                </a>
                            </li>
                            <li>
                                <a href="#"><img src="./images/part4/heroimage/Lucian.png" />
                                    <p>圣枪游侠</p>
                                </a>
                            </li>
                            <li>
                                <a href="#"><img src="./images/part4/heroimage/Zed.png" />
                                    <p>影流之主</p>
                                </a>
                            </li>
                            <li>
                                <a href="#"><img src="./images/part4/heroimage/Kled.png" />
                                    <p>暴怒骑士</p>
                                </a>
                            </li>
                            <li>
                                <a href="#"><img src="./images/part4/heroimage/Ekko.png" />
                                    <p>时间刺客</p>
                                </a>
                            </li>
                            <li>
                                <a href="#"><img src="./images/part4/heroimage/Qiyana.png" />
                                    <p>元素女皇</p>
                                </a>
                            </li>
                            <li>
                                <a href="#"><img src="./images/part4/heroimage/Vi.png" />
                                    <p>皮城执法官</p>
                                </a>
                            </li>
                            <li>
                                <a href="#"><img src="./images/part4/heroimage/Aatrox.png" />
                                    <p>暗裔剑魔</p>
                                </a>
                            </li>
                            <li>
                                <a href="#"><img src="./images/part4/heroimage/Nami.png" />
                                    <p>唤潮鲛姬</p>
                                </a>
                            </li>
                            <li>
                                <a href="#"><img src="./images/part4/heroimage/Azir.png" />
                                    <p>沙漠皇帝</p>
                                </a>
                            </li>
                            <li>
                                <a href="#"><img src="./images/part4/heroimage/Yuumi.png" />
                                    <p>魔法猫咪</p>
                                </a>
                            </li>
                            <li>
                                <a href="#"><img src="./images/part4/heroimage/Thresh.png" />
                                    <p>魂锁典狱长</p>
                                </a>
                            </li>
                            <li>
                                <a href="#"><img src="./images/part4/heroimage/Illaoi.png" />
                                    <p>海兽祭司</p>
                                </a>
                            </li>
                            <li>
                                <a href="#"><img src="./images/part4/heroimage/RekSai.png" />
                                    <p>虚空遁地兽</p>
                                </a>
                            </li>
                            <li>
                                <a href="#"><img src="./images/part4/heroimage/Ivern.png" />
                                    <p>翠神</p>
                                </a>
                            </li>
                            <li>
                                <a href="#"><img src="./images/part4/heroimage/Kalista.png" />
                                    <p>复仇之矛</p>
                                </a>
                            </li>
                            <li>
                                <a href="#"><img src="./images/part4/heroimage/Bard.png" />
                                    <p>星界游神</p>
                                </a>
                            </li>
                            <li>
                                <a href="#"><img src="./images/part4/heroimage/Rakan.png" />
                                    <p>幻翎</p>
                                </a>
                            </li>
                            <li>
                                <a href="#"><img src="./images/part4/heroimage/Xayah.png" />
                                    <p>逆羽</p>
                                </a>
                            </li>
                            <li>
                                <a href="#"><img src="./images/part4/heroimage/Ornn.png" />
                                    <p>山隐之焰</p>
                                </a>
                            </li>
                            <li>
                                <a href="#"><img src="./images/part4/heroimage/Sylas.png" />
                                    <p>解脱者</p>
                                </a>
                            </li>
                            <li>
                                <a href="#"><img src="./images/part4/heroimage/Neeko.png" />
                                    <p>万花通灵</p>
                                </a>
                            </li>
                            <li>
                                <a href="#"><img src="./images/part4/heroimage/Aphelios.png" />
                                    <p>残月之肃</p>
                                </a>
                            </li>
                            <li>
                                <a href="#"><img src="./images/part4/heroimage/Pyke.png" />
                                    <p>血港鬼影</p>
                                </a>
                            </li>
                            <li>
                                <a href="#"><img src="./images/part4/heroimage/Sett.png" />
                                    <p>腕豪</p>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>

            <!-- 第五部分 -->
            <div class="part5 w clearfix">
                <!-- 创作馆：左 -->
                <div class="fanart-left fl">
                    <div class="part-top w clearfix">
                        <h2 class="fl">FANART创作馆</h2>
                        <div class="part-top-more">
                            <a href="#">
                                更多·→
                            </a>
                        </div>
                        <ul class="fanartlist fl">
                            <li>
                                <a href="#">
                                    <img src="./images/part5/fanart1.jpg" alt="">
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="./images/part5/fanart2.jpg" alt="">
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="./images/part5/fanart3.jpg" alt="">
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="./images/part5/fanart4.jpg" alt="">
                                </a>
                            </li>
                        </ul>
                        <ul class="fanartlist fl">
                            <li>
                                <a href="#">
                                    <img src="./images/part5/fanart5.jpg" alt="">
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="./images/part5/fanart6.jpg" alt="">
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="./images/part5/fanart7.jpg" alt="">
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="./images/part5/fanart8.jpg" alt="">
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
                <!-- 创作馆：右 -->
                <div class="fanart-right fr">
                    <div class="fanart-right-l">
                        <a href="#">
                            <img src="./images/part5/teach.jpg" alt="">
                        </a>
                    </div>
                    <div class="fanart-right-r">
                        <ul class="r-list">
                            <li>
                                <a href="#">
                                    <img src="./images/part5/survey.jpg" alt="">
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="./images/part5/seeversion.jpg" alt="">
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="./images/part5/brandshow.jpg" alt="">
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="./images/part5/teamwork .jpg" alt="">
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <!-- 尾部区域 -->
    <div class="footer-wrapper">
        <div class="footer w clearfix">
            <!-- 底部logo -->
            <a href="#" class="footer-logo fl">
                <div class="tencent-logo">

                </div>
                <div class="riot-logo">

                </div>
            </a>
            <!-- 底部文字 -->
            <div class="footer-text fr">
                <ul class="footer-text-list">
                    <li>
                        <a href="#">腾讯互动娱乐&nbsp;|</a>
                    </li>
                    <li>
                        <a href="#">服务条款&nbsp;|</a>
                    </li>
                    <li>
                        <a href="#">隐私保护指引&nbsp;|</a>
                    </li>
                    <li>
                        <a href="#">儿童隐私保护指引&nbsp;|</a>
                    </li>
                    <li>
                        <a href="#">腾讯游戏招聘&nbsp;|</a>
                    </li>
                    <li>
                        <a href="#">腾讯游戏客服&nbsp;|</a>
                    </li>
                    <li>
                        <a href="#">游戏列表&nbsp;|</a>
                    </li>
                    <li>
                        <a href="#">广告服务及商务合作</a>
                    </li>
                </ul>
                <p>腾讯公司版权所有</p>
                <p>COPYRIGHT © 1998 - 2020 TENCENT. ALL RIGHTS RESERVED.</p>
                <p>COPYRIGHT © 2012 Riot Games,Inc. ALL RIGHTS RESERVED.</p>
                <p>本网络游戏适合18+岁的用户使用；为了您的健康，请合理控制游戏时间。</p>
                <p>
                    <a href="#">粤网文[2017]6138-1456号 |</a>
                    <a href="#">（总）网出证（粤）字第057号</a>
                </p>
                <p>批准文号：新出审字[2011]310号 |文网进字[2011] 004号 | 出版物号：ISBN 978-7-89989-145-2|全国文化市场统一举报<br>电话：12318</p>
            </div>
        </div>
    </div>
</body>

</html>